<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="flex flex-wrap justify-center gap-4 p-6">
    <a class="group relative inline-block text-sm font-medium text-white" href="#">
      <span class="absolute inset-0 border border-red-600"></span>
      <span
        class="block border border-red-600 bg-red-600 px-12 py-3 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1"
      >
        Download
      </span>
    </a>

    <a class="group relative inline-block text-sm font-medium text-red-600" href="#">
      <span class="absolute inset-0 border border-current"></span>
      <span
        class="block border border-current bg-white px-12 py-3 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1"
      >
        Download
      </span>
    </a>
  </body>
</html>
